<template>
  <div ref="highchartsPie" id="container" class="highchartsPie" />
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import highcharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(highcharts);
export default defineComponent({
  setup(props: any) {
    const option = {
      colors: [
        "#0167E1",
        "#0DB9BB",
        "#EE47D1",
        "#8A3FB5",
        "#4057BA",
        "#FF1F1A",
        "#D3A141",
        "#4CC395",
        "#D25D41",
        "#605AD8",
        "#925AD8",
        "#0167E1",
      ],
      chart: {
        type: "pie",
        backgroundColor: "rgba(0, 0, 0, 0)", //去掉白色背景
        options3d: {
          enabled: true,
          alpha: 60,
        },
      },
      tooltip: {
        // pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
      },
      title: {
        text: "",
      },
      credits: {
        enabled: false, //版权信息
      },
      exporting: {
        enabled: false, //导出配置
      },
      legend: {
        enabled: true,
        layout: "vertical",
        align: "right",
        verticalAlign: "middle",
        //  align: "center",
        // layout: "horizontal",
        //  verticalAlign: "bottom",
        //   maxHeight: 74,
        maxHeight: 200,
        alignColumns: false,
        symbolRadius: 0,
        itemMarginTop: 8,

        itemStyle: {
          fontSize: "12px",
          color: "#fff",
          fontWeight: "normal",
        },
        navigation: {
          activeColor: "#7AD17B",
          animation: true,
          arrowSize: 12,
          enabled: true,
          inactiveColor: "#FF6660",
          style: {
            fontWeight: "bold",
            color: "#01D4F9",
            fontSize: "12px",
          },
        },
      },
      plotOptions: {
        pie: {
          innerSize: 70,
          depth: 45,
        },
      },
      series: [
        {
          name: "百分比",
          data: [
            {
              name: "红草莓",
              y: 15687,
              h: 16,
              bfb: 29,
            },
            {
              name: "白草莓",
              y: 15687,
              h: 12,
              bfb: 8,
            },
            {
              name: "红颜草莓",
              y: 15687,
              h: 5,
              bfb: 11,
            },
            {
              name: "甜宝草莓",
              y: 15687,
              h: 9,
              bfb: 11,
            },
            {
              name: "红颜草莓",
              y: 15687,
              h: 8,
              bfb: 13,
            },
            {
              name: "甜宝草莓",
              y: 15687,
              h: 36,
              bfb: 18,
            },
          ],
          showInLegend: true,
          center: ["50%", "45%"],
        },
      ],
    };

    onMounted(() => {
      highcharts.chart("container", option);
    });
  },
});
</script>
<style>
.highchartsPie {
  width: 100%;
  height: 100%;
  /* margin-top: 5px; */
}
</style>
